<template>
	<div class="Faker" ref="wrapper">
		<div class="content">
			<div class="faker-good">
				<p class="faker-p">品类管理</p>
				<p class="faker-p1">
					<el-button plain @click="add()">+ 添加商品</el-button>
				</p>
			</div>
			<div style="margin-top: 20px;margin-left: 40px" class="faker-content">
				<template>
					<el-table
							:data="list"
							border
							@row-click="data"
							>
						<el-table-column
								prop="id"
								label="品类Id"
								>
						</el-table-column>
						<el-table-column
								prop="name"
								label="品类名称"
						>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<span style="color: #000" @click="move(scope.row)">修改名称</span>
								<span style="color: #000" @click="look()">查看其子品类</span>
							</template>
						</el-table-column>
					</el-table>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
	import {faker,
		fakermove
	} from "../../api/index.js";
	// import Bscroll from 'better-scroll'
	export default {
		name: "Faker",
		data(){
			return{
				list:[],
				home:{},
				total:0,
				pagesize:10,
				currpage:1,
			}
		},
		mounted() {
			this.faker();
			this.scroll = new Bscroll(this.$refs.wrapper)
		},
		methods:{
			async faker(){
				const res = await faker();
				console.log(res);
				this.list=res.data
			},
			data(row,event,colum){
				this.home=row
			},
			add(){
				this.$router.push("/fakeradd")
			},
			move(v){
				this.$prompt("请输入修改内容", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					inputValue: v.name
				}).then(({value})=>{
						fakermove({
							id:v.id,
							name:value
						}).then((res)=>{
							faker().then(data=>{
								this.list=data.data;
								this.$message({
									type: "success",
									message: res.data
								})

							})
						})
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "取消修改"
						});
					});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./../../Scss/index";
	.Faker{
		/*width: 100%;*/
		/*height: 100%;*/
		/*overflow: hidden;*/
		/*z-index: 1;*/
		.faker-content{

		}
		.faker-good{
			display: flex;
			justify-content: space-between;
			.faker-p{
				@include FontOnly(20px);
				@include Mlt(40px,20px)
			}
			.faker-p1{
				@include Mlt(40px,20px)
			}
		}
		.el-table--border{
		}
	}
</style>
